<!-- 组件 -->
<template>
  <div class="base-setting">
    <div class="base-setting-options">
      <h4>分割线</h4>
      <select :value="splitLine" @change="splitLineChange">
        <option value="solid">实线</option>
        <option value="dashed">虚线</option>
        <option value="dotted">点状</option>
      </select>
    </div>
    <div class="base-setting-options">
      <h4>字体大小</h4>
      <input :value="fontSize" @change="fontSizeChange" type="range" min="10" max="20" />
      <p style="margin-left: 8px;">{{ fontSize }}px</p>
    </div>
    <div class="base-setting-options" style="box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);">
      <h4>字体类型</h4>
      <select :value="fontFamily" @change="fontFamilyChange">
        <option v-for="(item, index) in fontList" :key="index" :style="'font-family:\'' + item + '\';'" :value="item">{{ item }}</option>
      </select>
    </div>
    <p class="base-setting-bottom">
      <span @click="saveBaseSetting" class="base-setting-button">确 定</span>
      <span @click="resetBaseSetting" class="base-setting-button">默 认</span>
    </p>
  </div>
</template>

<script>
const {ipcRenderer} = window.electron;

export default {
  name: '',
  model: {
    prop: 'baseSetting',
    event: 'baseSettingChange',
  },
  props: {
    baseSetting: {
      type: Object,
      default() {
        return {
          splitLine: 'solid',
          fontSize: 14,
          fontFamily: '',
        };
      },
    },
  },
  data() {
    return {
      splitLine: 'solid',
      fontSize: 14,
      fontFamily: '',
      fontList: [],
    };
  },
  mounted() {
    ipcRenderer.send('mainWindow', {message: 'font'});
    ipcRenderer.on("font", res => {
      this.fontList = res
    });
    this.splitLine = this.baseSetting.splitLine;
    this.fontSize = this.baseSetting.fontSize;
  },
  watch: {
    fontList() {
      this.$nextTick(function() {
        this.fontFamily = this.baseSetting.fontFamily;
      });
    },
  },
  methods: {
    splitLineChange(e) {
      this.splitLine = e.target.value;
      this.$emit('baseSettingChange', {
        splitLine: this.splitLine,
        fontSize: this.fontSize,
        fontFamily: this.fontFamily,
      });
    },
    fontSizeChange(e) {
      this.fontSize = e.target.value;
      this.$emit('baseSettingChange', {
        splitLine: this.splitLine,
        fontSize: this.fontSize,
        fontFamily: this.fontFamily,
      });
    },
    fontFamilyChange(e) {
      this.fontFamily = e.target.value;
      this.$emit('baseSettingChange', {
        splitLine: this.splitLine,
        fontSize: this.fontSize,
        fontFamily: this.fontFamily,
      });
    },
    saveBaseSetting() {
      this.$emit('saveBaseSetting');
    },
    resetBaseSetting() {
      this.splitLine = 'solid';
      this.fontSize = 14;
      this.fontFamily = '黑体';
      this.$emit('baseSettingChange', {
        splitLine: this.splitLine,
        fontSize: this.fontSize,
        fontFamily: this.fontFamily,
      });
    },
  },
};
</script>

<style scoped>
.base-setting {
  display: flex;
  flex-direction: column;
}
.base-setting h4 {
  width: 80px;
}
.base-setting select {
  outline: none;
  border-radius: 4px;
  padding: 3px;
  max-width: 170px;
}
.base-setting-options {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
}

.base-setting-bottom {
  align-self: flex-end;
  margin: 10px;
  padding: 6px 10px;
}
.base-setting-button {
  font-size: 12px;
  padding: 6px 8px;
  color: #000;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.base-setting-button:last-child {
  margin-left: 16px;
}
.base-setting-button:first-child {
  color: red;
}
.base-setting-button:last-child:hover {
  border: 1px solid #000;
}
.base-setting-button:first-child:hover {
  color: #fff !important;
  background: red !important;
  border: 1px solid red;
}
</style>
